/**** IMPORTANT THESE ARE NEEDED ****/	
	#container {
	width: 100%;
	  float:none;
	  padding: 0;
	  margin:0 auto;
	  margin-bottom:15px;
	  /* optional */
	  /*-webkit-border-radius: 2px;
	  -moz-border-radius: 2px;
	  border-radius: 2px;*/
	  /* content-box is NEEDED. if border-box is enabled
	     then it when Masonry calculates the height and width
		 of the container it counts incorrectly and the result
		 images running to the edge of the container on the right
		 and bottom sides. Only apply content-box to the container. */
	  -webkit-box-sizing:content-box;
	  -moz-box-sizing:content-box;
	  box-sizing:content-box;
	}
	
	.box {
	  margin: 0.2em;
	  /*float: left;*/
	  /* optional */
	  /*-webkit-border-radius: 2px;
	  -moz-border-radius: 2px;
	  border-radius: 2px;*/
	  overflow: hidden;
	  text-align: center;
	  background: #f5f5f5;
	  padding: 7px;
	}
	.box a {
		text-align: center;
		overflow: hidden;
	}
	.box .inbox {
		/*height: 250px;*/
		/*display: table-cell;*/
    	vertical-align: middle;
	}
	.box img {
		width: 100%;
		left: 50%;
		margin-left: -100%;
		bottom: 0%;
		position: relative;
	}

	/* untuk img press */
	.tinggi-fix {
		height: 170px;
		overflow: hidden;
	}
	/* end img press */
	
	/* unfortunately masonry needs hard pxs for images */
	.col1 { width: 80px; }
	.col2 { width: 279px; } /*aslinya 207*/
	.col3 { width: 280px; }
	.col4 { width: 380px; }
	.col5 { width: 480px; }
	.col1 img { max-width: 80px; }
	.col2 img { max-width: 100%; border-top-left-radius:2px;border-top-right-radius:2px;}/*aslinya 207*/
	.col3 img { max-width: 280px; }
	.col4 img { max-width: 380px; }
	.col5 img { max-width: 480px; }
	
	/* animations for the transition/reordering */
	.transitions-enabled.masonry,
	.transitions-enabled.masonry .masonry-brick {
	  -webkit-transition-duration: 0.7s;
	  -moz-transition-duration: 0.7s;
	  -ms-transition-duration: 0.7s;
	  -o-transition-duration: 0.7s;
	  transition-duration: 0.7s;
	}
	.transitions-enabled.masonry {
	  -webkit-transition-property: height, width;
	  -moz-transition-property: height, width;
	  -ms-transition-property: height, width;
	  -o-transition-property: height, width;
	  transition-property: height, width;
	}
	.transitions-enabled.masonry  .masonry-brick {
	  -webkit-transition-property: left, right, top;
	  -moz-transition-property: left, right, top;
	  -ms-transition-property: left, right, top;
	  -o-transition-property: left, right, top;
	  transition-property: left, right, top;
	}



/**** Clearfix ****/
	/*.clearfix:before, .clearfix:after { content: ""; display: table; }
	.clearfix:after { clear: both; }
	.clearfix { zoom: 1; }*/

	.pinmeta{
		height:30px;
		background:#fff;
		border-bottom-left-radius:2px;
		border-bottom-right-radius:2px;	
		border:1px solid #e9e9e9;
		border-top:none;
	}
	.pinmeta img{
		width:25px;
		padding-top:3px;
		padding-left:3px;
	}
	.pinmeta span{
		padding:3px;
		font-size:0.7rem;
	}
	.nm-produk{
		margin-top: 7px;
		margin-right: -7px;
		margin-left: -7px;
		margin-bottom: -7px;
		padding:5px;		
		line-height:18px;
		font-size:13px;
		text-align: center;
		color: #555;
		height: 50px;
		/*border:1px solid #ddd;*/
	}
	.pinsocial{
		font-size:0.6rem;
		color:#ccc;
	}

	
	@media (max-width: 1080px) {
		.col2 { width: 305px; }
		/*.col2 img { max-width: 253px; }*/
	}
	@media (max-width: 800px) {
		.col2 { width: 350px; }
		.tinggi-fix {
		height: 220px;
		overflow: hidden;
		/*.col2 img { max-width: 190px; }*/
	}
	@media (max-width: 720px) {
		.col2 { width: 490px; }
		.tinggi-fix {
		height: 300px;
		overflow: hidden;
		/*.col2 img { max-width: 215px; }*/
	}
	@media (max-width: 540px) {
		.col2 { width: 390px; }
		.tinggi-fix {
		height: 250px;
		overflow: hidden;
	}
		/*.col2 img { max-width: 210px; }*/
	}
